#{extends 'main.html' /}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
	content="text/html; charset=windows-1256">
<title>Insert title here</title>
</head>
<body>


	<div id="example" class="k-content">
<div id="grid" ></div>

		
		
		<script>
                $(document).ready(function () {
                	
                    dataSource = new kendo.data.DataSource({
                    	
                        transport: {
                        	
                            read:  {
                                url: "@{Application.jsonusers()}",
                                dataType: "json"
                            },
                            update: {
                                url: "@{Application.Update()}",
                                dataType: "application/json"
                                
                            },
                            create: {
                                url: "@{Application.Create()}",
                                dataType: "json"
                            },
                            destroy: {
                                url: "@{Application.Delete()}",
                                dataType: "json"
                            },
                            parameterMap: function(options, operation) {
                                if (operation !== "read" && options.models) {
                                    return {users: kendo.stringify(options.models)};
                                }
                            }
                        },
                        batch: true,
                        pageSize: 10,
                        requestEnd: onRequestEnd,
                        schema: {
                            model: {
                            	id:"id",
                                fields: {
                                	id:{ editable: false, nullable: false},
                                    username: { editable: true, nullable: true },
                                    password: { type: "number", validation: { min: 0, required: true } }
                                }
                            }
                        }
                    });
                	
                    $("#grid").kendoGrid({
                    	dataSource:dataSource,
                        pageable: true,
                        height: 430,
                        toolbar: ["create", "save", "cancel"],
                        columns: [
								  { field: "id" , title: "id",width:20},
                                  { field: "username", title: "User Name",width: 80 },
                                  { field: "password", title: "Password",width:20},
                                  { command: "destroy", title: "&nbsp;", width: 20 }],
                        editable: true
                    });
                    
                  
                    
                    
               
               
                });
                function onRequestEnd(evt) {
                	
                	  if (evt.type != "read") {
                		 
                	        evt.sender.read();
                	    }
                	//$("#grid").data("kendoGrid").dataSource.read(); 
                }
                function Save() {
                	
                    //getting json data from kendo Grid
                    var gridData = $("#grid").data("kendoGrid").dataSource.data();
                    
                    $.ajax({
                        type: "POST"
                        , url: "@{Application.Update()}"
                        , data: JSON.stringify({ users: gridData })
                        ,contentType:"application/json"
                        , success: function (result) {
                            
                        }
                    });
                }
            </script>
	</div>








</body>
</html>